<!DOCTYPE HTML>
<html>

<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
	<link href="css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
	<link href="css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
	<link href="css/style.min862f.css?v=4.1.0" rel="stylesheet">
<![endif]-->
<title>添加管理员</title>
<style type="text/css">
input.error {
	background: rgb(251, 227, 228);
	border: 1px solid #fbc2c4;
	color:red;
}

label.error {
	color: red;
	display: inline-block;
	margin-left: 1.5em;
}

label.checked {
	/* background:url("../assets/img/iconpic-error.png") no-repeat 0px 0px; */

}
</style>
</head>

<body>
	<div class="container">
		<div class="row">
			<div class="col-sm-12">
				<form class="form-horizontal" id="addUser" method="post">
					<fieldset>
						<legend>添加用户</legend>
						<div class="form-group">
							<label class="col-sm-2 control-label">用户名</label>
							<div class="col-sm-6">
								<input type="text" id="userName" name="userName"
									class="form-control" placeholder="请输入用户名">
							</div>
						</div>

						<div class="form-group">
							<label  class="col-sm-2 control-label">密码</label>
							<div class="col-sm-6">
								<input type="password" id="password" name="password"
									class="form-control" placeholder="请输入密码">
							</div>
						</div>

						<div class="form-group">
							<label  class="col-sm-2 control-label">确认密码</label>
							<div class="col-sm-6">
								<input type="password" id="confirmPassword"
									name="confirmPassword" class="form-control"
									placeholder="请再次输入密码">
							</div>
						</div>
						<div class="form-group">
							<label  class="col-sm-2 control-label">真实姓名</label>
							<div class="col-sm-6">
								<input type="text" id="realName" name="realName"
									class="form-control" placeholder="请输入真实姓名">
							</div>
						</div>
						<div class="form-group">
							<label  class="col-sm-2 control-label">手机号</label>
							<div class="col-sm-6">
								<input type="text" id="telephone" name="telephone"
									class="form-control" placeholder="请输入手机号">
							</div>
						</div>
						<div class="form-group">
							<label  class="col-sm-2 control-label">角色类型</label>
							<div class="col-sm-6">
								<select class="form-control" id="roleId" name="roleId">
									<option value="">请选择</option>

								</select>
							</div>
						</div>
						<!--防止表单重复提交-->
						<input type="hidden" name="token" value="${token}" />
						<div class="form-group">
							<div class="col-sm-4 col-sm-offset-5">
								<button type="submit" class="btn btn-success">提交</button>
								<button type="reset" class="btn btn-default">重置</button>
							</div>
						</div>
					</fieldset>
				</form>
			</div>
		</div>
	</div>
	<script src="js/plugins/layer/layer.js"></script>
	<script src="js/jquery.min.js?v=2.1.4"></script>
	<script src="js/bootstrap.min.js?v=3.3.6"></script>
	<script src="js/content.min.js?v=1.0.0"></script>
	<script src="js/plugins/staps/jquery.steps.min.js"></script>
	<script src="js/plugins/validate/jquery.validate.min.js"></script>
	<script src="js/plugins/validate/messages_zh.min.js"></script>

	<script type="text/javascript">
		$(document).ready(function() {
		    var e = "<i class='fa fa-times-circle'></i> ";
			// 在键盘按下并释放及提交后验证提交表单
		var validator = $("#addUser").validate({
				submitHandler:function(form) {
					$(form).ajaxSubmit({
						url:"<%=basePath%>/admin/addUser",
						data : $(form).serialize(),
						type : "POST",
						dataType :"JSON",
						success : function(data) {
							if(data.status=="1002"){
								layer.msg('添加成功!', { icon: 1, time: 1000 });
								//validator.resetForm();
                                setTimeout(function () {
                                    window.parent.location.reload();
                                }, 500);
							}else if(data.status=="1001"){
								layer.msg('两次密码不一致!', { icon: 3, time: 500 });
								validator.resetForm();
							}else{
								layer.msg('添加失败!', { icon: 2, time: 1000 });
								validator.resetForm();
							}
 						}
					});
				},
				errorPlacement : function(error, element) {
					element.closest('.form-group').append(error);//显示错误消息提示
					},
				rules : {
					userName : {
						remote : {
							url : "<%=basePath%>/admin/checkUserExist", //后台处理程序
							type : "POST", //数据发送方式
							dataType : "JSON", //接受数据格式
							data : { //要传递的数据
								userName : function() {
									return $("#userName").val();
								}
							},
							 dataFilter: function (data) {
							  	var result =  eval("("+data+")");
                        		if(result.status == "1002"){
                        			return false;
                        		}else{
                        			return true;
                        		}
                        	}
						},
						required : true,
						minlength : 2
					},
					password : {
						required : true,
						minlength : 6
					},
					confirmPassword : {
						required : true,
						minlength : 6,
						equalTo : "#password"
					},
					realName : "required",
					telephone: {
						required: true,
						isMobile: true
					},
					roleId : "required"
				},
				messages : {
					userName : {
						required : e+"请输入用户名",
						minlength : e+"用户名必需由两个字母组成",
						remote:e+"用户名已存在"
					},
					password : {
						required : e+"请输入密码",
						minlength :e+ "密码长度不能小于 6 个字符"
					},
					confirmPassword : {
						required : e+"请输入密码",
						minlength :e+ "密码长度不能小于 6 个字符",
						equalTo : e+"两次密码输入不一致"
					},
					realName : e+"请输入用户真实姓名",
					telephone:{
						required: e+"请输入您的联系电话",
						isMobile: e+"请输入一个有效的联系电话"
					},
					roleId : e+"请选择"
				}
			})
			// 手机号码验证
			jQuery.validator.addMethod("isMobile", function(value, element) {
				var length = value.length;
				var mobile = /^1[34578]\d{9}$/;
				return this.optional(element) || (length == 11 && mobile.test(value));
			}, e+"请正确填写您的手机号码");
		})

	</script>
	<!--/请在上方写此页面业务相关的脚本-->
</body>

</html>